<template>
	<div>
		<!-- el-row: 行 -->
		<!-- 第一行 -->
		<el-row :gutter="20">
			<!-- el-col: 列表 -->
			<!-- 左侧 -->
			<el-col :span="8">
				<el-card shadow="hover" class="mgb20">
					<div class="user-info" style="height: 260px;">
						<el-avatar :size="120" :src="imgurl" />
						<div class="user-info-cont">
							<div class="user-info-name">{{ administrator_name }}</div>
							<div style="margin-top: 10px; font-size: 16px">{{ role }}</div>
							<div style="margin-top: 10px; font-size: 16px">联系电话: {{ parking_lot_phone }}</div>
						</div>
					</div>
				</el-card>
				<el-card shadow="hover" class="mgb20">
					<div class="cms-info" style="height: 360px;">
						<h4>收费标准</h4>
						<p style="font-size:15px; margin-top: 10px;">⊙停车5元/小时,上不封顶。</p>
						<p style="font-size:15px; margin-top: 5px;">⊙超过半小时，不足1小时，按1小时收费。</p>
						<p style="font-size:15px; margin-top: 5px;">⊙不超过半小时，不收取费用。</p>
					</div>
				</el-card>
			</el-col>

			<!-- 右侧 -->
			<el-col :span="16">
				<el-row :gutter="20" class="mgb20">
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-1">
								<el-icon class="grid-con-icon">
									<DataBoard />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ parking_lot_total }}</div>
									<div>车位总数</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-3">
								<el-icon class="grid-con-icon">
									<Memo />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ parking_lot_count }}</div>
									<div>剩余车位</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="8">
						<el-card shadow="hover" :body-style="{ padding: '0px' }">
							<div class="grid-content grid-con-2">
								<el-icon class="grid-con-icon">
									<Avatar />
								</el-icon>
								<div class="grid-cont-right">
									<div class="grid-num">{{ user_total }}</div>
									<div>用户数量</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-card>
							<h4 style="margin-bottom: 20px;">入场车辆信息</h4>
							<!-- 等级车辆信息 -->
							<el-form :model="form" label-width="auto" style="max-width: 600px">
								<el-form-item label="车牌号码">
									<el-col :span="22">
										<el-input v-model="form.vehicle_num" />
									</el-col>
									<el-col :span="2" class="text-center">
										<div style="width: 40px;height: 40px;position: relative; overflow: hidden; margin-top: 10px">
											<input ref="inp" @change="chooseFn" class="file" type="file" style="position: absolute;top: 0;left: 0;z-index: 10; opacity: 0; cursor: pointer; width: 40px;height: 40px;">
											<el-icon :size="`30px`" color="#2D8CF0" style="position: absolute;top: 0;left: 0;z-index: 1;vertical-align: middle;margin-left: 10px; "><Camera /></el-icon>
										</div>
									</el-col>

								</el-form-item>
								<el-form-item label="入场时间">
									<el-col :span="11">
										<el-date-picker v-model="form.date1" type="date" placeholder="日期"
											style="width: 100%" />
									</el-col>
									<el-col :span="2" class="text-center">
										<span class="text-gray-500">-</span>
									</el-col>
									<el-col :span="11">
										<el-time-picker v-model="form.date2" placeholder="时间" style="width: 100%" />
									</el-col>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmit">确定</el-button>
									<el-button @click="resetForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-card>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-card>
							<h4 style="margin-bottom: 20px;">出场车辆信息</h4>
							<el-form :model="form2" label-width="auto" style="max-width: 600px">
								<el-form-item label="车牌号码">
									<el-col :span="22">
										<el-input v-model="form2.vehicle_num" />
									</el-col>
									<el-col :span="2" class="text-center" style="position: relative">
										<div style="width: 40px;height: 40px;position: relative; overflow: hidden; margin-top: 10px">
											<input ref="inp2" @change="chooseFn2" class="file" type="file" style="position: absolute;top: 0;left: 0;z-index: 10; opacity: 0; cursor: pointer; width: 40px;height: 40px;">
											<el-icon :size="`30px`" color="#2D8CF0" style="position: absolute;top: 0;left: 0;z-index: 1;vertical-align: middle;margin-left: 10px; "><Camera /></el-icon>
										</div>
									</el-col>
								</el-form-item>
								<el-form-item label="出场时间">
									<el-col :span="11">
										<el-date-picker v-model="form2.date1" type="date" placeholder="日期"
											style="width: 100%" />
									</el-col>
									<el-col :span="2" class="text-center">
										<span class="text-gray-500">-</span>
									</el-col>
									<el-col :span="11">
										<el-time-picker v-model="form2.date2" placeholder="时间" style="width: 100%" />
									</el-col>
								</el-form-item>
								<el-form-item label="停车费用">
									<el-input v-model="form2.parking_record_cost" disabled />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="onSubmit2">确定</el-button>
									<el-button @click="resetForm2">重置</el-button>
								</el-form-item>
							</el-form>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>


	</div>
</template>

<script setup lang="ts" name="dashboard">
import Schart from 'vue-schart';
import { ref, reactive } from 'vue';
import imgurl from '../assets/img/img.jpg';
import { uploadVehicleNumFn ,feeRecordCreateFn, parkingLotAddFn, parkingLotSubFn, parkingLotInfoFn, totalUserleFn, parkingRecordEnterFn, parkingRecordLeaveFn } from '../api/index';
import { ElMessage } from 'element-plus';

const administrator_name = localStorage.getItem('administrator_name');
const administrator_role = localStorage.getItem('administrator_role');
const role: string = administrator_role === 'administrator' ? '管理员' : '普通用户';


// 车位信息
let parking_lot_total = ref(0);
let parking_lot_count = ref(0);
let parking_lot_phone = ref("");
// 获取停车场信息
const getTotal = async () => {
	let token = localStorage.getItem('auto_token');
	await parkingLotInfoFn({ token }).then(
		content => {
			let { code, data } = content;
			if (code == 200) {
				console.log('1.0', content)
				parking_lot_total.value = data[0].parking_lot_total
				parking_lot_count.value = data[0].parking_lot_count
				parking_lot_phone.value = data[0].parking_lot_phone
			}
		}
	)
}
getTotal();

const addParkingLotCount = async () => {
	let token = localStorage.getItem('auto_token');
	await parkingLotAddFn({ token }).then(
		content => {
			let { code } = content;
			console.log('2.0', content)
			if (code == 200) {
				parking_lot_count.value = content.parking_lot_count
			}

		}
	)
}

const subParkingLotCount = async () => {
	let token = localStorage.getItem('auto_token');
	await parkingLotSubFn({ token }).then(
		content => {
			let { code } = content;
			console.log('3.0', content)
			if (code == 200) {
				parking_lot_count.value = content.parking_lot_count
			}

		}
	)
}

// 创建订单
const feeRecordCreate = async (token: any, parking_record_id: any, vehicle_num: any, fee_record_money: any, parking_record_enter_time: any, parking_record_leave_time: any) => {
	await feeRecordCreateFn({ token, parking_record_id, vehicle_num, fee_record_money, parking_record_enter_time, parking_record_leave_time })
		.then(
			content => {
				console.log("订单:", content)
				let { code, msg } = content;
				if (code == 200) {
					ElMessage.success(msg);
				}
				else {
					ElMessage.error(msg);
				}
			},
			err => {
				console.log(err)
			}
		)
}

// 格式化日期
const getDate1 = (datestr: any) => {
	let date = new Date(datestr);
	let YY = date.getFullYear();
	let MM = date.getMonth() + 1;
	let DD = date.getDate();
	return `${YY}-${MM}-${DD}`;
}

// 格式化时间
const getDate2 = (datestr: any) => {
	let date = new Date(datestr);
	let h: string | number = date.getHours();
	let m: string | number = date.getMinutes();
	let s: string | number = date.getSeconds();

	h = h < 10 ? '0' + h : h;
	m = m < 10 ? '0' + m : m;
	s = s < 10 ? '0' + s : s;
	return `${h}:${m}:${s}`;
}


// 格式化日期时间
const getDateTime2 = () => {
	let date = new Date();
	let YY = date.getFullYear();
	let MM = date.getMonth() + 1;
	let DD = date.getDate();
	let h: string | number = date.getHours();
	let m: string | number = date.getMinutes();
	let s: string | number = date.getSeconds();

	h = h < 10 ? '0' + h : h;
	m = m < 10 ? '0' + m : m;
	s = s < 10 ? '0' + s : s;
	return {
		date1: `${YY}-${MM}-${DD}`,
		date2: `${YY}-${MM}-${DD} ${h}:${m}:${s}`
	}
}

// 统计用户数量
let user_total = ref(0);
// 统计用户数量
const initTotalUser = async () => {
	await totalUserleFn()
		.then(
			content => {
				// console.log('1.0', content)
				let { code, result: [{ total }] } = content;
				if (code == 200) {
					// 记录所有用户数量
					user_total.value = total;
				}
			}
		)
}
initTotalUser();



// 收集入场车辆信息
let d1 = getDateTime2();
const form = reactive({
	vehicle_num: '',
	date1: d1.date1,
	date2: d1.date2,
})

const resetForm = () => {
	let d = getDateTime2();
	form.vehicle_num = "";
	form.date1 = d.date1;
	form.date2 = d.date2;
}
const resetForm2 = () => {
	let d = getDateTime2();
	form2.vehicle_num = "";
	form2.parking_record_cost = "";
	form2.date1 = d.date1;
	form2.date2 = d.date2;
}




const onSubmit = async () => {
	// console.log('submit!',form)
	let { vehicle_num, date1, date2 } = form;
	let token = localStorage.getItem('auto_token');

	if (vehicle_num != "" && date2) {
		let parking_record_enter_time = getDate1(date1) + " " + getDate2(date2)
		if (vehicle_num && parking_record_enter_time) {
			// console.log(parking_record_enter_time)
			await parkingRecordEnterFn({ vehicle_num, parking_record_enter_time, token }).then(
				content => {
					console.log("入场:", content)
					let { msg, code } = content;
					if (code == 200) {
						ElMessage.success(msg);
						// 计算剩余车位
						subParkingLotCount()
						resetForm();
					}
					else {
						ElMessage.error(msg)
					}
				}
			)
		} else {
			ElMessage.error("检查是否缺少参数~~");
		}
	}
	else {
		console.log("检查是否缺少参数~")
		ElMessage.error("检查是否缺少参数~~");
	}

}

// 收集出场车辆信息
let d2 = getDateTime2();
const form2 = reactive({
	vehicle_num: '',
	date1: d2.date1,
	date2: d2.date2,
	parking_record_cost: ""
})

const onSubmit2 = async () => {
	// console.log('submit!',form2)
	let { vehicle_num, date1, date2 } = form2;
	// console.log({date2})
	let token = localStorage.getItem('auto_token');
	if (vehicle_num != "" && date1 && date2) {
		let parking_record_leave_time = getDate1(date1) + " " + getDate2(date2)
		if (vehicle_num && parking_record_leave_time) {
			// console.log(parking_record_leave_time)
			await parkingRecordLeaveFn({ vehicle_num, parking_record_leave_time, token }).then(
				content => {
					console.log("离场:", content)
					let {
						parking_record_cost,
						parking_record_enter_time,
						parking_record_leave_time,
						parking_record_id,
						vehicle_num,
						code,
						msg
					} = content
					if (code == 200) {
						ElMessage.success(msg)
						form2.parking_record_cost = parking_record_cost + "元";
						// 计算剩余车位
						addParkingLotCount();

						// 创建订单~~
						feeRecordCreate(token, parking_record_id, vehicle_num, parking_record_cost, parking_record_enter_time, parking_record_leave_time)

						// 重置表单
						// resetForm2();
					}
					else {
						ElMessage.error(msg)
					}



				}
			)
		}
		else {
			ElMessage.error("检查是否缺少参数~~");
		}
	}
	else {
		// console.log("检查是否缺少参数~")
		ElMessage.error("检查是否缺少参数~~");
	}
}

// 选择图片(识别车牌)
let inp = ref();
const chooseFn = async ()=>{
    // 检查数据
    // console.dir(inp.value.files[0]);   
    if(inp.value && inp.value.files[0]){
        let file =  inp.value.files[0];
        if(file){
			const formData = new FormData();
        	formData.append('img', file);
			await uploadVehicleNumFn(formData)
			.then(
				(content: any)=>{
					console.log('1.0',content)
					let {code ,result} = content;
					if(code == 200){
						let words = result[0].words
						form.vehicle_num = words
					}
				},
				err=>{
					console.log(err)
				}
			)
		}
    }
}

let inp2 = ref();
const chooseFn2 = async ()=>{
    // 检查数据
    // console.dir(inp.value.files[0]);   
    if(inp2.value && inp2.value.files[0]){
        let file =  inp2.value.files[0];
        if(file){
			const formData = new FormData();
        	formData.append('img', file);
			await uploadVehicleNumFn(formData)
			.then(
				(content: any)=>{
					console.log('2.0',content)
					let {code ,result} = content;
					if(code == 200){
						let words = result[0].words
						form2.vehicle_num = words
					}
				},
				err=>{
					console.log(err)
				}
			)
		}
    }
}

</script>

<style scoped>
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

::-webkit-scrollbar {
	display: none;
}

.el-row {
	margin-bottom: 20px;
}

.grid-content {
	display: flex;
	align-items: center;
	height: 100px;
}

.grid-cont-right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #999;
}

.grid-num {
	font-size: 30px;
	font-weight: bold;
}

.grid-con-icon {
	font-size: 50px;
	width: 100px;
	height: 100px;
	text-align: center;
	line-height: 100px;
	color: #fff;
}

.grid-con-1 .grid-con-icon {
	background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
	color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
	background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
	color: rgb(100, 213, 114);
}

.grid-con-3 .grid-con-icon {
	background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
	color: rgb(242, 94, 67);
}

.user-info {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
}

.user-info-cont {
	padding-left: 50px;
	flex: 1;
	font-size: 14px;
	color: #999;
}

.user-info-cont div:first-child {
	font-size: 30px;
	color: #222;
}

.user-info-list {
	font-size: 14px;
	color: #999;
	line-height: 25px;
}

.user-info-list span {
	margin-left: 70px;
}

.mgb20 {
	margin-bottom: 20px;
}

.todo-item {
	font-size: 14px;
}

.todo-item-del {
	text-decoration: line-through;
	color: #999;
}

.schart {
	width: 100%;
	height: 300px;
}
</style>
